// Copyright © 2023 The Things Network Foundation, The Things Industries B.V.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// stylelint-disable
// Grid system which adheres to the TTUI grid.
:global
  .grid
    display: grid !important
    row-gap: var(--grid-row-gap, $ls.s) !important
    width: 100% !important

    // Prevent column-gaps that are wider than the page width when combined.
    column-gap: calc(min(var(--grid-column-gap, $ls.s), 100% / 11)) !important

    &:not(.auto-columns)
      grid-template-columns: repeat(12, minmax(0, 1fr)) !important

    &.auto-columns
      grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr)) !important

    // Generate basic grid item classes.
    for $num in (1..12)
      .item-{$num}
        grid-column-end: span $num !important

    // Generate start-column (offset) classes.
    for $num in (1..12)
      .item-start-{$num}
        grid-column-start: $num !important

    // Generate responsive grid item styles.
    for $name, $width in $bp
      +media-query-min($width)
        for $num in (1..12)
          // Generate responsive grid item overrides.
          .{$name}\\:item-{$num}
            grid-column-end: span $num !important

          // Generate responsive start-colum (offset) item overrides.
          .{$name}\\:item-start-{$num}
            grid-column-start: $num !important

    &--center
      align-items: center !important

  // The container element is meant as a all-purpose container that
  // combines padding and max-width automatically for different breakpoints.
  // It spans the full width, which means it can also use full-width backgrounds
  // without extra markup.
  .container
    width: 100% !important
    max-width: var(--container-max-width) !important
    padding: var(--container-vertical-padding, 0) $ls.xs !important
    box-sizing: border-box !important
    margin-left: auto !important
    margin-right: auto !important

    // Below the smallest breakpoint.
    +media-query($bp.xs3)
      padding-left: $ls.xxs !important
      padding-right: @padding-left !important
      // Prevent downsizing to extremely narrow widths.
      min-width: calc(249px - $ls.xxs * 2) !important

    &--xs
      --container-max-width: $bp.xs
    &--sm
      --container-max-width: $bp.sm
    &--md
      --container-max-width: $bp.md
    &--lg
      --container-max-width: $bp.lg
    &--xl
      --container-max-width: $bp.xl
    &--xxl
      --container-max-width: $bp.xxl

  // Content justification.

  .j-center
    justify-content: center !important

  .j-start
    justify-content: start !important

  .j-end
    justify-content: end !important

  .j-between
    justify-content: space-between !important

  .j-around
    justify-content: space-around !important

  .j-evenly
    justify-content: space-evenly !important

  .al-center
    align-items: center !important

  .al-start
    align-items: start !important

  .al-end
    align-items: end !important

  // Responsive justification styles.
  for $name, $width in $bp
    +media-query($width)
      .{$name}\\:j-center
        justify-content: center !important

      .{$name}\\:j-start
        justify-content: start !important

      .{$name}\\:end
        justify-content: end !important

      .{$name}\\:j-between
        justify-content: space-between !important

      .{$name}\\:al-center
        align-items: center !important

      .{$name}\\:al-start
        align-items: start !important

      .{$name}\\:al-end
        align-items: end !important

  // Block justification.

  .block-center
    margin-left: auto !important
    margin-right: auto !important

  // Width and height.

  .w-full
    width: 100% !important

  .w-auto
    width: auto !important

  .w-content
    width: fit-content !important

  .h-full
    height: 100% !important

  .h-auto
    height: auto !important

  .h-vh
    height: 100vh !important

  for $num in (1..9)
    $percentage = percentage($num / 10)
    .w-{$num}0
      width: $percentage !important

    .h-{$num}0
      width: $percentage !important

    for $name, $width in $bp
      +media-query($width)
        .{$name}:w-{$num}0
          width: $percentage !important

        .{$name}:h-{$num}0
          height: $percentage !important

  for $name, $width in $bp
    +media-query($width)
      .{$name}:w-full
        width: 100% !important

      .{$name}:w-auto
        width: auto !important

      .{$name}:w-content
        width: fit-content !important

      .{$name}:h-full
        height: 100% !important

      .{$name}:h-auto
        height: auto !important

  // Positioning.
  .pos-relative
    position: relative !important
  .pos-absolute
    position: absolute !important
  .pos-fixed
    position: fixed !important
  .pos-static
    position: static !important
  // Flex layout.
  .direction-column
    flex-direction: column !important
  .direction-row
    flex-direction: row !important
  .flex-wrap
    flex-wrap: wrap !important

  for $name, $width in $bp
    +media-query($width)
      .{$name}:pos-relative
        position: relative !important
      .{$name}:pos-absolute
        position: absolute !important
      .{$name}:pos-fixed
        position: fixed !important
      .{$name}:pos-static
        position: static !important
      .{$name}\\:direction-column
        flex-direction: column !important
      .{$name}\\:direction-row
        flex-direction: row !important
      .{$name}:flex-wrap
        flex-wrap: wrap !important

  // Layout shorthands.
  .pos-absolute-stretch
    position: absolute !important
    top: 0 !important
    left: 0 !important
    width: 100% !important
    height: 100% !important

  .pos-absolute-container
    position: absolute !important
    top: 0 !important
    left: 0 !important

  .flex-horizontal
    display: flex !important
    justify-content: space-between !important
    align-items: center !important

  .flex-column
    display: flex !important
    justify-content: space-between !important
    flex-direction: column !important

  .flex-grow
    flex-grow: 1 !important

  .flex-no-grow
    flex-grow: 0 !important

  .flex-shrink
    flex-shrink: 1 !important

  .flex-no-shrink
    flex-shrink: 0 !important

  for $name, $width in $bp
    +media-query($width)
      .{$name}\\:direction-column
        flex-direction: column !important

      .{$name}\\:direction-row
        flex-direction: row !important

  // Opacity.
  .opacity-0
    opacity: 0 !important
  for $num in (1..10)
    $percentage = percentage($num / 10)
    .opacity-{$num}0
      opacity: $percentage !important

  // Miscellaneous.
  .overflow-hidden
    overflow: hidden !important

  .overflow-auto
    overflow: auto !important

  .overflow-visible
    overflow: visible !important

  .overflow-scroll
    overflow: scroll !important

  .overflow-x-hidden
    overflow-x: hidden !important

  .overflow-x-auto
    overflow-x: auto !important

  .overflow-x-visible
    overflow-x: visible !important

  .overflow-x-scroll
    overflow-x: scroll !important

  .overflow-y-hidden
    overflow-y: hidden !important

  .overflow-y-auto
    overflow-y: auto !important

  .overflow-y-visible
    overflow-y: visible !important

  .overflow-y-scroll
    overflow-y: scroll !important

  .text-overflow-ellipsis
    overflow: hidden !important
    text-overflow: ellipsis !important
    white-space: nowrap !important

  .cursor-pointer
    cursor: pointer !important

  .lh-1
    line-height: 1

  // Font sizes.

  for $name in $fs
    .fs-{$name}
      font-size: convert('$fs.' + $name) !important

  // Line heights.
  for $name in $lh
    .lh-{$name}
      line-height: convert('$lh.' + $name) !important

  // Font weights.
  .fw-normal
    font-weight: $fw.normal !important

  .fw-bold
    font-weight: $fw.bold !important

  .fw-bolder
    font-weight: $fw.bolder !important

  // Text alignments.

  .text-center
    text-align: center !important

  .text-left
    text-align: left !important

  .text-right
    text-align: right !important

  // Text decorations.

  .td-underline
    text-decoration: underline !important

  .td-line-through
    text-decoration: line-through !important

  .td-none
    text-decoration: none !important

  // Box sizing.

  .box-border
    box-sizing: border-box !important

  .box-content
    box-sizing: content-box !important

  // Cursor.

  .cursor-pointer
    cursor: pointer !important

  .cursor-not-allowed
    cursor: not-allowed !important

  .cursor-grab
    cursor: grab !important

  .cursor-zoom-in
    cursor: zoom-in !important

  .cursor-zoom-out
    cursor: zoom-out !important

  // Responsive typography styles.
  for $name, $width in $bp
    +media-query($width)
      .{$name}:text-center
        text-align: center !important

      .{$name}:text-left
        text-align: left !important

      .{$name}:text-right
        text-align: right !important

  // DISPLAY UTILITIES.
  .d-flex
    display: flex !important

  .d-inline
    display: inline !important

  .d-block
    display: block !important

  .d-none
    display: none !important

  .d-inline-block
    display: inline-block !important

  .d-inline-flex
    display: inline-flex !important

  // Responsive display styles.
  for $name, $width in $bp
    +media-query($width)
      .{$name}\\:d-flex
        display: flex !important

      .{$name}\\:d-inline
        display: inline !important

      .{$name}\\:d-block
        display: block !important

      .{$name}\\:d-none
        display: none !important

      .{$name}\\:d-inline-block
        display: inline-block !important

      .{$name}\\:d-inline-flex
        display: inline-flex !important

  .br-0
    border-radius: 0 !important

  .br-xs
    border-radius: $br.xs !important

  .br-s
    border-radius: $br.s !important

  .br-m
    border-radius: $br.m !important

  .br-l
    border-radius: $br.l !important

  .br-xl
    border-radius: $br.xl !important

  .border-none
    border: none !important

  .border-regular
    border: 1px solid var(--c-border-neutral-light) !important
